/* 区块链 */

.qkl_body {
	background: url(../img/qkl_bg.png) no-repeat;
	background-size: cover;

	color: white;
	padding-bottom: 20px;
}

header {
	background: url(../img/qkl_header.png) no-repeat;
	background-size: cover;
	height: 115px;
}

.qkl_top {
	padding-top: 20px;
	position: relative;
}

.qkl_top > p {
	position: absolute;
	top: 20px;
	right: 12px;
	display: flex;
	align-items: center;
	font-size: 9px;
}

.qkl_top i {
	display: block;
	width: 5px;
	height: 12px;
	background: url(../img/qkl_icons.png) no-repeat -7px -3px;
	background-size: 190px 72px;
	margin-right: 2px;
}

header ul {
	display: flex;
	text-align: center;
	margin-top: 6px;
}

header li {
	flex: 1;
}

header li > p {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	font-size: 10px;
}

header li i,
header li span {
	display: block;
	width: 14px;
	height: 14px;
	background: url(../img/qkl_icons.png) no-repeat;
	background-size: 190px 72px;
	margin-right: 2px;
}

header li i {
	background-position: -20px -3.5px;
}

header li span {
	background-position: -40px -3.5px;
}

.qkl_container {
	position: relative;
	z-index: 1;
	padding: 0 12px;
}

.qkl_lists {
	height: 158px;
	width: 100%;
	color: #c8c9d4;
	margin-bottom: 10px;
}

.lists_top {
	background: rgba(0, 0, 0, .4);
	border-radius: 5px 5px 0 0;
	height: 135px;
	display: flex;
	justify-content: space-between;
	padding: 0 12px;
}

.lists_top li {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.lists_top li div {
	text-align: right;
}

.lists_top li p {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	font-size: 9px;
	height: 16px;
}

.lists_top i,
.lists_top span,
.lists_top em,
.lists_top b {
	display: block;
	width: 14px;
	height: 14px;
	background: url(../img/qkl_icons.png) no-repeat;
	background-size: 190px 72px;
}

.lists_top b {
	background-position: -60px -3.5px;
}

.lists_top i {
	background-position: -2px -1.5px;
}

.lists_top span {
	background-position: -83px -1.5px;
}

.lists_top em {
	background-position: -104px -1.5px;
}

.lists_bottom {
	background: rgba(225, 225, 225, .4);
	border-radius: 0 0 5px 5px;
	height: 23px;
	position: relative;
}

.lists_bottom {
	display: flex;
	font-size: 9px;
}

.lists_bottom p {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	position: relative;
}

.lists_bottom i,
.lists_bottom span {
	display: block;
	width: 24px;
	background: url(../img/qkl_icons.png) no-repeat;
	background-size: 190px 72px;
}

.lists_bottom span {
	height: 8px;
	background-position: -124px -3px;
	margin-left: 2px;
}

.lists_bottom > .active span {
	background-position: -156px -3px;
}

.lists_bottom > .active {
	color: red;
}

.lists_bottom i {
	position: absolute;
	height: 40px;
	background-position: -1px -24px;
	top: 8px;
}

.lists_bottom > p:first-of-type i {
	left: 2px;
}

.lists_bottom > p:last-of-type i {
	right: 2px;
}

.qkl_container > .qkl_lists:last-of-type {
	margin-bottom: 40px;
}

.qkl_container > .qkl_lists:last-of-type .lists_bottom i {
	width: 0;
}

/* 区块信息 */

.qkMsg_body {
	background: url(../img/qkl_bg.png) no-repeat;
	background-size: cover;

	padding: 20px 12px 66px;
}

.con_top {
	height: 45px;
	background: rgba(255, 255, 255, .4);
	border-radius: 5px 5px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 13px;
}

.con_top p {
	display: flex;
	align-items: center;
}

.con_top i {
	display: block;
	width: 15px;
	height: 15px;
	background: url(../img/qkl_icons.png) no-repeat -30px -23px;
	background-size: 190px 72px;
	margin-right: 5px;
}

.black-bg-wrap {
	background: rgba(0, 0, 0, .4);
	border-radius: 5px;
}

.con_detail {
	height: 270px;
}

.con_detail > div:not(:last-of-type) {
	border-bottom: 1px solid #59a7c7;
	display: flex;
}

.con_detail > div {
	padding: 0 12px;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	overflow: hidden;
}

.con_detail > div p {
	font-size: 10px;
	display: flex;
	align-items: center;
	min-width: 55px;
}

.fl1 {
	height: 47px;
}

.fl1 > div {
	display: flex;
	flex-direction: column;
	line-height: 21px;
}

[class^='fl'] i,
[class^='fl'] span {
	display: block;
	width: 14px;
	height: 14px;
	background: url(../img/qkl_icons.png) no-repeat;
	background-size: 190px 72px;
	margin-right: 5px;
}

.fl1 i {
	background-position: -40px -3.5px;
}

.fl1 span {
	background-position: -60px -3.5px;
}

.fl2 i {
	background-position: -5px -2.5px;
}

.fl3 i {
	background-position: -53px -23px;
}

.fl4 i {
	background-position: -74px -22px;
}

.fl5 i {
	background-position: -104px -2.5px;
}

.fl6 i {
	background-position: -96px -23px;
}

.fl7 i {
	background-position: -120px -23px;
}

.fl8 i {
	background-position: -143px -23px;
}

.fl8 {
	height: 43px;
}

.fl8 > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 20px;
	line-height: 20px;
}

.right_btn {
	display: block;
	width: 10px;
	height: 14px;
	background: url(../img/qkl_icons.png) no-repeat -174px -22.5px;
	background-size: 190px 72px;
}

.record_container {
	position: relative;
	z-index: 1;
	height: 280px;
}

.marT10 {
	margin-top: 10px;
}

.record_title {
	height: 40px;
	background: rgba(255, 255, 255, .4);
	display: flex;
	align-items: center;
	padding: 0 13px;
}

.record_title i {
	display: block;
	width: 14px;
	height: 14px;
	background: url(../img/qkl_icons.png) no-repeat -18.5px -2.5px;
	background-size: 190px 72px;
	margin-right: 5px;
}

.record_wrap {
	height: 230px;
	overflow: hidden;
}

.record_wrap > div {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	display: none;
}

.record_wrap .recordLists {
	border-bottom: 1px solid #59a7c7;
}

.record_wrap > .active {
	display: flex;
}

.recordLists {
	height: 45px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 12px;
}

.recordList {
	display: flex;
	justify-content: space-between;
}

.img_center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	display: none;
}

.img_center span {
	display: block;
	margin-top: 5px;
}

/* 我的 */

.my_body {
	background: url(../img/my_bg_01.png) no-repeat;
	background-size: cover;

	color: white;
	padding-bottom: 20px;
}

.my_top {
	background: url(../img/header_bg.png) no-repeat;
	background-size: cover;
	height: 135px;
	padding-top: 50px;
}

.my_f1 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.my_f1 i {
	display: block;
	width: 20px;
	height: 20px;
	background: url(../img/my_icon.png) no-repeat -9px -6px;
	background-size: 266px 62px;
}

.my_f2 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.my_f2 i {
	display: block;
	width: 10px;
	height: 16px;
	background: url(../img/my_icon.png) no-repeat -54px -6px;
	background-size: 266px 62px;
}

.my_f3 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.my_f3 input {
	width: 50%;
}

.my_f3 i {
	display: block;
	width: 20px;
	height: 20px;
	background: url(../img/my_icon.png) no-repeat -33px -5px;
	background-size: 266px 62px;
	margin-right: 10px;
}

.my_f3 button {
	position: absolute;
	right: 12px;
	top: 10px;
	width: 53px;
	height: 15px;
	font-size: 10px;
}

.my_container {
	position: relative;
	z-index: 1;
	padding: 0 12px;
	color: #c8c9d4;
}

.my_container > label,
.my_container > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #00598d;
	color: #c8c9d4;
	box-sizing: border-box;
}

.my_container > label > p,
.my_container > a > p {
	display: flex;
	align-items: center;
}

.my_container i {
	display: block;
	width: 20px;
	height: 24px;
	background: url(../img/my_icon.png) no-repeat;
	background-size: 250px 65.5px;
	margin-right: 10px;
}

.my_user_id i {
	background-position: -66px -6px;
}

.user_name i {
	background-position: -92px -6px;
}

.user_tel i {
	background-position: -118px -8px;
}

.user_email i {
	background-position: -146px -5px;
}

.user_pwd i {
	background-position: -174px -8px;
}

.user_payPwd i {
	background-position: -196px -6px;
}

.user_tel b:after,
.user_pwd b:after,
.user_payPwd b:after,
.user_newUser b:after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 16px;
	background: url(../img/my_icon.png) no-repeat -222px -5px;
	background-size: 250px 65.5px;
	margin-left: 5px;
	vertical-align: text-bottom;
}

.user_newUser span img {
	width: 20px;
	height: 24px;
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin-right: 10px;
}

/* 转账 */

.zz_body {
	background: url(../img/zz_bg.png) no-repeat;
	background-size: cover;
	padding-top: 20px;
}

.nav_tab {
	display: flex;
	justify-content: space-around;
	margin: 12px 0;
}

.nav_tab > div {
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.sao div,
.bg_addr div,
.num div {
	height: 50px;
	width: 50px;
	background: rgba(252, 252, 252, .2);
	border-radius: 50%;
	position: absolute;
	animation: opacity 3s linear infinite;
	-moz-animation: opacity 3s linear infinite;
	-webkit-animation: opacity 3s linear infinite;
	-o-animation: opacity 3s linear infinite;
}

.sao p,
.bg_addr p,
.num p {
	height: 40px;
	width: 40px;
	background: rgba(252, 252, 252, .2);
	border-radius: 50%;
	position: absolute;
	animation: opacity 2s linear infinite;
	-moz-animation: opacity 2s linear infinite;
	-webkit-animation: opacity 2s linear infinite;
	-o-animation: opacity 2s linear infinite;
}

@keyframes opacity {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes opacity {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes opacity {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes opacity {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.nav_tab i {
	display: block;
	margin: 0 auto;
	width: 25px;
	height: 25px;
	background: url(../img/zc_icon.png) no-repeat;
	background-size: 250px 65.5px;
}

.sao i {
	background-position: -12px -12px;
}

.bg_addr i {
	background-position: -48px -12px;
}

.num i {
	background-position: -84px -12px;
}

.input_lasts {
	padding: 0 12px;
}

.input_lasts label {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #003170;
}

.input_lasts i {
	display: block;
	width: 20px;
	height: 17px;
	background: url(../img/zc_icon.png) no-repeat;
	background-size: 250px 65.5px;
}

.input_lasts span {
	display: block;
	width: 20px;
	height: 17px;
	background: url(../img/zc_icon.png) no-repeat -206px -16px;
	background-size: 250px 65.5px;
	margin-left: 10px;
}

.input_lasts input {
	margin-left: 10px;
	width: calc(100% - 30px);
}

.user_addr input {
	flex: 1;
}

.user_id i {
	background-position: -124px -16px;
}

.user_addr i {
	background-position: -152px -16px;
}

.user_num i {
	background-position: -180px -16px;
}

.input_lasts button {
	margin: 24px 0;
}

/* 二维码弹框 */

.mash_wrapper {
	background: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}

.mash_main {
	position: absolute;
	top: 160px;
	left: 0;
	right: 0;
	z-index: 20;
	margin: auto;
	width: 160px;
	height: 160px;
}

.mash_main img {
	max-width: 100%;
	height: auto;
}

/* 转账明细 */

.zz_details_wrap {
	padding: 0 12px;
	color: #828ead;
}

.zz_details_bg {
	background: rgba(255, 255, 255, .1);
	border-radius: 5px;
	min-height: 250px;
}

.zz_details_s1 {
	display: flex;
	text-align: center;
	border-bottom: 1px solid #5e668e;
	height: 38px;
	box-sizing: border-box;
}

.zz_details_s1 li {
	flex: 1;
	height: 38px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.zz_details_s1 li a {
	display: block;
	width: 100%;
	height: 20px;
}

.zz_details_s1 li:first-of-type a {
	border-right: 1px solid #5e668e;
}

.zz_details_s1 > .active {
	border-bottom: 1px solid white;
}

.zz_details_s1 > .active a {
	color: #c8c9d4;
}

.zz_details_s2 {
	display: flex;
	justify-content: space-around;
	height: 24px;
	line-height: 24px;
}

.zz_details_s2 a {
	color: #828ead;
}

.zz_details_s2 > .active > a {
	color: #c8c9d4;
}

.zz_details_tab {
	display: none;
}

.zz_details_tab.active {
	display: block;
}

.zz_details_lists {
	padding: 0 10px;
	margin-top: 6px;
	display: none;
}

.zz_details_lists.active {
	display: block;
}

.zz_details_lists ul {
	padding: 4px 0;
}

.zz_details_lists ul:not(:first-of-type) {
	border-top: 1px solid #505881;
}

.zz_details_lists li {
	display: flex;
	justify-content: space-between;
	height: 20px;
}

.zz_details_lists li:first-of-type {
	color: #c8c9d4;
}

/* 修改信息 */

.xg_body {
	background: url(../img/my_bg_02.png) no-repeat;
	background-size: cover;

	padding: 20px 12px 50px;
}

.xg_container {
	position: relative;
	z-index: 1;
}

.xg_container > div {
	border-bottom: 1px solid #095c93;
}

.xg_container label {
	display: flex;
	align-items: center;
	position: relative;
}

.xg_container input {
	color: #c8c9d4;
}

.xg_container label span {
	color: #118bca;
}

.xg_container em {
	letter-spacing: 6px;
}

.hqyzm {
	position: absolute;
	top: 12px;
	right: 0;
	height: 22px;
	width: 73px;
}

.bottom_btn {
	margin-top: 47px;
}

/* 修改登录密码 */

/* .modification_pwd span{
    opacity:0;
} */

.modification_pwd label > p {
	display: flex;
	margin-left: 12px;
	width: 75%;
}

.modification_pwd input {
	width: 75%;
}

/* 注册新用户 */

.newUser_container {
	position: relative;
	z-index: 1;
}

.img_ewm {
	width: 160px;
	height: 160px;
	margin: 100px auto;
	background: white;
}

.img_ewm img {
	max-width: 100%;
	height: auto;
}

/* 选择联系人 */

.choose_container {
	position: relative;
	z-index: 1;
}

.choose_container > .h45 {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #095c93;
	box-sizing: border-box;
}

.choose_container > .h45 span {
	flex: 1;
	text-align: right;
	margin-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 登录 */

.login_body {
	background: url(../img/login_bg.png) no-repeat;
	background-size: cover;

	color: white;
	padding-bottom: 20px;
}

.login_top {
	padding-top: 50px;
}

.login_container {
	position: relative;
	z-index: 1;
	margin-top: 45px;
	padding: 0 50px;
}

.logo_img {
	width: 95px;
	height: 95px;
	margin: 0 auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	overflow: hidden;
}

.logo_img > img {
	width: 95px;
	height: 95px;
}

.eye_pwd {
	display: block;
	width: 15px;
	height: 13px;
	background: url(../img/eye.png) no-repeat;
	background-size: cover;
}

.eye_pwd.hide {
	height: 7px;
	background: url(../img/hide_eye.png) no-repeat;
	background-size: cover;
}

.forget_pwd {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.forget_pwd label {
	display: flex;
	align-items: center;
}

.forget_pwd i {
	display: block;
	width: 10px;
	height: 10px;
	background: url(../img/non_checked.png) no-repeat;
	background-size: cover;
}

.forget_pwd input {
	display: none;
}

.forget_pwd input:checked + i {
	background: url(../img/checked.png) no-repeat;
	background-size: cover;
}

.login_btn {
	margin-top: 65px;
}

.register_newUsed {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
}

.register_newUsed p {
	margin: 0 5px;
}

.register_newUsed span {
	flex: 1;
	display: block;
	border-top: 1px solid #004e86;
}
